<template name="myOrderAre">
	<view class="calc display column orderAre">
		<view class="display flow orderTitleAre">
			<text>我的订单</text>
			<view class="display flow" @click="allClick">
				<text class="pColor" style="margin-right: 10rpx;">查看全部</text>
				<uni-icons :type="'arrowright'" :color="blackColor" size="13" />
			</view>
		</view>
		<view class="display flow">
			<view v-for="(item,index) in orderList" :key="index" class="display column orderItemAre" @click="orderClick(index)">
				<image :src="item.img"></image>
				<text>{{item.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import data from '@/common/data.js'
	import {mapState} from 'vuex'
	export default {
		name: "myOrderAre",
		data() {
			return {
				orderList: data.orderList,
				blackColor: this.global.blackColor
			}
		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods:{
			allClick(){
				uni.navigateTo({
					url: '/subPackages/mine/myOrder/myOrder'
				})
			},
			orderClick(index){
				if(this.hasLogin){
					let idx = 1
					switch (index){
						case 0:
							idx = 1
							break;
						case 1:
							idx = 2
							break;
						case 2:
							idx = 3
							break;
						case 3:
							idx = 4
							break;
						case 4:
							uni.navigateTo({
								url: '/subPackages/mine/refundAre/refundAre'
							})
							return;
					}
					uni.navigateTo({
						url: '/subPackages/mine/myOrder/myOrder?index=' + idx
					})
				}else{
					this.$emit('loginClick')
				}
			}
		}
	}
</script>

<style lang="scss">
	.orderTitleAre{
		@include font;
		align-items: flex-end;
	}
	.orderItemAre{
		@include font($fontSize,$greyColor);
		@include flex-align-justify;
		@include margin(60rpx,'top');
		image{
			@include widthHeight(45rpx);
			@include margin(20rpx,'bottom');
		}
	}
</style>
